<template>
    <div class="page">
        <div class="title-view">非金融企业债务融资工具定价估值</div>
        <select-date class="date-select-box" v-model="dateRange" @onok="requestTable"/>

        <table-view class="table-view" :labels="labels" :data="data" :content-width="500"/>

        <div class="title-view">估值曲线</div>
        <select-date class="date-select-box" v-model="viewDateRange" @onok="requestView"/>

        <div class="grade-view">
            <radio-box title="评级" :items="tableLabels" v-model="itemActive"/>
            <radio-box title="期限" :items="yearItems" v-model="yearItemsActive"/>
            <div class="search-btn">查询</div>
            <div class="description">图由历史各期限评级的估值连点而成，可选择起止日期区间以选择数据显示范围，点击“查询”查看非金融企业债务融资工具定价估值曲线图。</div>
        </div>

        <div class="line-view-box"></div>

    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{
        .title-view{
            padding-top: 1.2rem;
            text-align: center;
        }

        .date-select-box{
            margin: 1rem 0;
        }

        .table-view{
            border-bottom: .8rem solid @color-bg-gray;
        }

        .grade-view{
            border-top: 1px solid @color-line-gray;

            .search-btn{
                line-height: 3.8rem;
                width: 12rem;
                background-color: @app-color;
                color: @color-white;
                border-radius: .3rem;
                text-align: center;
                margin: 1.5rem auto;
            }

            .description{
                font-size: 1.1rem;
                line-height: 1.5rem;
                padding: 0 1.5rem 2rem;
                color: @color-text-gray;
            }
        }

        .line-view-box{
            border-top: 1px solid @color-line-gray;
            border-bottom: .8rem solid @color-bg-gray;
        }
    }
</style>

<script>

    import {study} from 'api'

    export default {
        data(){



            const tableLabels = ['重点AAA', 'AAA', 'AA+', 'AA', 'AA-'];

            const labels = [
                {label: '信用等级', key: 'label', width: 88},
                {label: '1年', key: 'valuVal1y'},
                {label: '3年', key: 'valuVal3y'},
                {label: '5年', key: 'valuVal5y'},
                {label: '7年', key: 'valuVal7y'},
                {label: '10年', key: 'valuVal10y'},
                {label: '15年', key: 'valuVal15y'},
                {label: '20年', key: 'valuVal20y'},
                {label: '30年', key: 'valuVal30y'}
            ];

            const yearItems = labels.filter((o, k)=>k).map(o=>o.label);

            return {
                dateRange: [new Date().toAppDate()],
                viewDateRange: [new Date().toAppDate(), new Date().toAppDate()],
                itemActive: [0],
                yearItems,
                yearItemsActive: 0,
                labels,
                tableLabels,
                data: []
            }
        },
        created(){
            this.requestTable();
            this.requestView();
        },
        methods: {
            requestTable(){
                this.$axios.get(study.API_VALUATION_TABLE, {
                    params: {
                        date: this.dateRange[0]
                    }
                }).then(({data})=>{
                    this.data = data.list.map(o=>({
                        ...o,
                        label: this.tableLabels[o.credLevel - 1]
                    }));
                })
            },
            requestView(){
                this.$axios.get(study.API_VALUATION_TABLE_VIEW, {
                    params: {
                        beginDate: this.viewDateRange[0],
                        endTime: this.viewDateRange[1],
                        ids: '1,2',
                        deadline: '15'
                    }
                }).then(({data})=>{
                    this.data = data.list;
                })
            }
        }
    }
</script>